<template>
	<u-popup v-model="authStore.loginPopup" mode="bottom" safe-area-inset-bottom :mask-close-able="false"
		border-radius="36">
		<view class="iflex column fill login-popup">
			<view v-if="showClose" @click.stop="tapClose" class="iflex aic jcc login-popup__close">
				<image src="./assets/close.icon.png"></image>
			</view>
			<view class="iflex fill aic jcsb login-popup__header">
				<text>登录授权</text>
			</view>
			<view class="iflex jcc login-popup__button">
				<view v-if="!agreement" class="cover-login" @click.stop="tapCoverLogin"></view>
				<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="tapGetPhoneNumber"
					:custom-style="{width:'656rpx',height:'100rpx',fontSize:'32rpx',fontWeight:400}">一键登录</u-button>
			</view>
			<view class="iflex fill" style="margin-top: 80rpx;">
				<CustomRadio v-model="agreement">
					<view class="agreement">登录视为同意<text @click.stop="tapAgreement(2)">《用户服务协议》</text> 和
						<text @click.stop="tapAgreement(1)">《隐私政策》</text>
					</view>
				</CustomRadio>
			</view>
			<!-- 			<view class="iflex fill">
				<input v-model="phoneNumber" />
				<button @click="tapTryLogin">模拟登录</button>
			</view> -->
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import CustomRadio from '@/components/custom-radio/custom-radio.vue';
	import { ref, defineProps, withDefaults, defineEmits, watchEffect } from 'vue';
	import type { AnyObj } from '@/types/global';
	import { login, getOpenId } from '@/apis/auth';
	import { wxLogin } from '@/utils/wx.api';
	import { useAuthStore } from '@/stores';
	const authStore = useAuthStore();
	const emit = defineEmits<{ success : [AnyObj]; 'update:modelValue' : [boolean] }>();
	const props = withDefaults(defineProps<{
		showClose ?: boolean;
		modelValue ?: boolean;
	}>(), {
		showClose: true,
		modelValue: false
	});

	const agreement = ref(false);

	function tapClose() {
		emit('update:modelValue', false);
		authStore.close();
	}

	async function tapGetPhoneNumber(e : { detail : { code : string; errMsg : string; } }) {
		console.log('getPhoneNumber', e);
		if (e.detail.errMsg !== "getPhoneNumber:ok") {
			return;
		}

		const wxLoginCode = await wxLogin();
		console.log('wxLoginCode', wxLoginCode);
		const openIdResult = await getOpenId(wxLoginCode);
		if (openIdResult.code !== 200) {
			uni.showToast({
				icon: 'none',
				title: openIdResult.msg ?? '服务器忙，请稍后再试'
			});
			return;
		}
		const openId = openIdResult.data as string;

		login(openId, e.detail.code).then((result) => {
			console.log('result', result);
			if (result.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: result.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			authStore.setProfile(result.data);
			emit('success', result.data);
			tapClose();
			uni.showToast({
				icon: 'success',
				title: '登录成功',
				duration: 1500
			});
		}).catch((error) => {
			console.log('error', error);
		});
	}

	function tapCoverLogin() {
		uni.showToast({
			icon: 'none',
			title: '请阅读并同意服务协议！'
		})
	};

	function tapAgreement(docType : number) {
		console.log(agreement);
		uni.navigateTo({
			url: `/pages-mine/agreement/agreement?docType=${docType}`
		})
	}

	const phoneNumber = ref('15757821930')
	function tapTryLogin() {
		login('1', phoneNumber.value).then((result) => {
			console.log('result', result);
			if (result.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: result.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			authStore.setProfile(result.data);
			emit('success', result.data);
			tapClose();
			uni.showToast({
				icon: 'success',
				title: '登录成功',
				duration: 1500
			});
		}).catch((error) => {
			console.log('error', error);
		});
	}
</script>

<style lang="scss">
	.login-popup {
		height: 580rpx;
		padding: 60rpx 48rpx;
		border-radius: 36rpx 36rpx 0 0;
		background: #FFF;

		&__close {
			padding: 20rpx;
			position: absolute;
			top: 50rpx;
			right: 37rpx;
			z-index: 1;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		&__header {
			color: #000000;
			font-size: 36rpx;
			font-weight: 500;
		}

		&__button {
			margin-top: 120rpx;
		}


		.cover-login {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 10;
		}

		.agreement {
			color: #898989;
			font-size: 20rpx;
			font-weight: 400;

			text {
				color: #000000;
			}
		}
	}
</style>